<template>
  <div class="wrapper">
    <catalog></catalog>
    <example>
      <template v-slot:title>
        基本用法
      </template>
      <l-button @click="showDialog1">clickToShowDialog</l-button>
      <l-dialog title="我是一个弹出框" :visible="visible1" :before-close="handleClose">
        <p>我是一个弹出框</p>
        <p>我是一个弹出框</p>
        <p>我是一个弹出框</p>
        <p>我是一个弹出框</p>
        <template v-slot:foot>
          <l-button @click="closeDialog1">关闭</l-button>
        </template>
      </l-dialog>
      <template v-slot:code>
        {{DialogExample.example1}}
      </template>
    </example>

    <example>
      <template v-slot:title>
        自定义宽度的弹框
      </template>
      <l-button @click="showDialog2">clickToShowDialog</l-button>
      <l-dialog title="我是一个弹出框" :visible.sync="visible2" width="800px">
        <p>我是一个弹出框</p>
        <p>我是一个弹出框</p>
        <p>我是一个弹出框</p>
        <p>我是一个弹出框</p>
        <template v-slot:foot>
          <l-button @click="closeDialog2">关闭</l-button>
        </template>
      </l-dialog>
      <template v-slot:code>
        {{DialogExample.example2}}
      </template>
    </example>

    <example>
      <template v-slot:title>
        before-close的用法
      </template>
      <l-button @click="showDialog3">clickToShowDialog</l-button>
      <l-dialog title="我是一个弹出框" :visible.sync="visible3" :before-close="handleClose">
        <p>我是一个弹出框</p>
        <p>我是一个弹出框</p>
        <p>我是一个弹出框</p>
        <p>我是一个弹出框</p>
        <template v-slot:foot>
          <l-button @click="closeDialog3">关闭</l-button>
        </template>
      </l-dialog>
      <template v-slot:code>
        {{DialogExample.example3}}
      </template>
    </example>

    <example>
      <template v-slot:title>
        几个回调事件
      </template>
      <l-button @click="showDialog3">clickToShowDialog</l-button>
      <l-dialog title="我是一个弹出框" :visible.sync="visible4" :before-close="handleClose"
                @open="open"
                @close="close"
                @opened="opened"
                @closed="closed">
        <p>我是一个弹出框</p>
        <p>我是一个弹出框</p>
        <p>我是一个弹出框</p>
        <p>我是一个弹出框</p>
        <template v-slot:foot>
          <l-button @click="closeDialog4">关闭</l-button>
        </template>
      </l-dialog>
      <template v-slot:code>
        {{DialogExample.example4}}
      </template>
    </example>

  </div>
</template>
<script>
import Catalog from '../components/Catalog';
import Example from '../components/Example';
import DialogExample from './Dialog-Example';

export default {
  name: 'Modal',
  components: {
    Catalog,
    Example
  },
  methods: {
    showDialog1 () {
      this.visible1 = true;
    },
    showDialog2 () {
      this.visible2 = true;
    },
    showDialog3 () {
      this.visible3 = true;
    },
    handleClose (done) {
      this.visible1 = false;
      done();
    },
    closeDialog1 () {
      this.visible1 = false;
    },
    closeDialog2 () {
      this.visible2 = false;
    },
    closeDialog3 () {
      this.visible3 = false;
    },
    closeDialog4 () {
      this.visible4 = false;
    },
    open () {
      alert('open');
    },
    opened () {
      alert('opened');
    },
    close () {
      alert('close');
    },
    closed () {
      alert('closed');
    }
  },
  data () {
    return {
      DialogExample,
      visible1: false,
      visible2: false,
      visible3: false,
      visible4: false
    };
  }
};
</script>
